<template>
  <div class="message-board">
    <!-- 下部分留言显示区域，占2/3 -->
    <div class="message-section">
      <el-card
        v-for="(message, index) in displayedMessages"
        :key="index"
        class="message-box"
      >
        <h4>{{ message.content }}</h4>

        <div v-if="message.replies.length > 0" class="replies">
          <div
            v-for="(reply, replyIndex) in message.replies"
            :key="replyIndex"
            class="reply"
          >
            回复：{{ reply }}
          </div>
        </div>
        <div class="message-actions">
          <el-button type="text" @click="toggleReply(index)">回复</el-button>
        </div>
        <div class="message-replies">
          <el-input
            v-if="message.editable"
            v-model="message.replyContent"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入回复内容"
            class="reply-textarea"
            @keydown.enter.native="submitReply(index)"
          />
          <el-button
            v-if="message.editable"
            type="primary"
            class="reply-button"
            @click="submitReply(index)"
          >提交回复
          </el-button>
        </div>
      </el-card>
    </div>
    <!-- 上部分发布留言区域，占1/3 -->
    <div class="publish-section">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="留言内容">
          <el-input
            v-model="form.desc"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addReply } from '@/api/message'
export default {
  data() {
    return {
      showPublish: true,
      form: {
        desc: ''
      },
      messages: [
        // 初始留言数据
        {
          content: '机房的空调好像不制冷了，室内温度很高，能尽快处理吗？',
          replies: [],
          replyContent: '',
          editable: false
        },
        {
          content: '电脑突然蓝屏，我正在做的作业还没保存，怎么办？',
          replies: [],
          replyContent: '',
          editable: false
        },
        {
          content: '机房的网络速度很慢，影响了我的在线课程学习，能帮忙解决吗？',
          replies: [],
          replyContent: '',
          editable: false
        }
        // 更多留言...
      ],
      currentPage: 1,
      pageSize: 5,
      totalPages: 1
    }
  },
  computed: {
    pages() {
      return Array.from({ length: this.totalPages }, (v, k) => k + 1)
    },
    displayedMessages() {
      return this.messages
    }
  },
  watch: {
    // 当留言列表更新时，重新计算总页数
    messages: {
      handler() {
        this.updateTotalPages()
      },
      deep: true
    }
  },
  methods: {
    onSubmit() {
      if (this.form.desc.trim() === '') {
        return
      }
      this.messages.push({
        content: this.form.desc,
        replies: [],
        editable: false
      })
      this.form.desc = ''
      this.updateTotalPages()
      this.currentPage = 1
    },
    changePage(page) {
      this.currentPage = page
    },
    toggleReply(index) {
    // 当点击回复按钮时，切换回复框的显示与隐藏
      this.displayedMessages[index].editable = !this.displayedMessages[index].editable
    },
    submitReply(index) {
      const message = this.displayedMessages[index]
      if (message.replyContent.trim() !== '') {
        const newReply = message.replyContent.trim()
        // 假设 addReply 是一个用来提交回复的 API 函数

        // 如果回复成功提交到服务器，将回复添加到消息的回复列表中
        message.replies.push(newReply)
        // 清空回复输入框
        message.replyContent = ''
        // 隐藏回复输入框
        message.editable = false
        // 提示用户回复成功
      } else {
        // 如果回复内容为空，则提示用户输入内容
        this.$message.warning('请输入回复内容！')
      }
    },

    updateTotalPages() {
      this.totalPages = Math.ceil(this.messages.length / this.pageSize)
    }
  }
}
</script>
<style scoped>
.message-replies {
  margin-top: 10px;
}

.reply-textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px; /* 添加底部外边距 */
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s;
}

.reply-textarea:focus {
  border-color: #409eff;
}
.message-board {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.message-section {
  flex: 2;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.message-box {
  margin-bottom: 20px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  background-color: #fff;
}

.message-actions {
  margin-top: 10px;
  padding: 10px;
  border-top: 1px solid #ebebeb;
}

.reply {
  margin-top: 10px;
  padding: 5px;
  border-left: 3px solid #409eff;
  background-color: #eef1f6;
  font-size: 0.9em;
  color: #4a4a4a;
  text-indent: 2em; /* 首行缩进2em */
}

/* 用于区分回复之间的分隔线 */
.reply + .reply {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  padding-top: 5px;
}

.publish-section {
  flex: 1;
  padding: 20px;
  background-color: #fff;
}

/* 表单样式 */
.el-textarea__inner {
  border-color: #dcdfe6 !important;
}

.el-button {
  margin-left: 10px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
  padding: 10px 15px;
}
</style>
